<template>
  <div class="list">
    <div class="selfdom">
      <div class="selfdomTao">
        <div class="self">
          <div class="v-hd2">
            <div class="yuanquan"></div>
            <span class="tit f-ff2 f-tdn">
              <router-link to='/find/rankinglist'>榜单</router-link>
            </span>
            <span class="more">
              <router-link to='/find/rankinglist'>更多</router-link>
            </span>
          </div>

          <div class="listTao">

            <div class="left">
              <dt class="Ltop">
                <div class="pho">
                  <img
                    class="photo"
                    src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
                    alt=""
                  >
                  <a
                href="javascript:;"
                    class="BjPhoto"
                  ></a>
                </div>
                <div class="right">
                  <a
         href="javascript:;"
                    class="biaos"
                  >
                    <h3>云音乐飙升榜</h3>
                  </a>
                  <div class="btn">
                    <a
                    href="javascript:;"
                      class="bofang"
                    ></a>
                    <a
                 href="javascript:;"
                      class="jiahao"
                    >收藏</a>
                  </div>
                </div>
              </dt>
              <dd class="listBiao">
                <ol>
                  <li
                    v-for="(item,index) in BangdanBS"
                    :key="item.id"
                    @mouseenter="mouseenter"
                    @mouseleave="mouseleave"
                  >
                    <p :class="{PXAAA:Bool}">
                      <span style="margin-right:10px">
                        {{index+1}}
                      </span>
                      <a
                   href="javascript:;"
                        class="HGname"
                      >{{item.name}}</a>
                    </p>
                    <div class="oper">
                      <a
                        href="javascript:;"
                        @click="BoFangYy(item.id)"
                      ></a>
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                    </div>
                  </li>
                </ol>
                <div class="more">
                  <a href="javascript:;">查看全部></a>
                </div>
              </dd>
            </div>

            <div class="left">
              <dt class="Ltop">
                <div class="pho">
                  <img
                    class="photo"
                    src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100"
                    alt=""
                  >
                  <a
                   href="javascript:;"
                    class="BjPhoto"
                  ></a>
                </div>
                <div class="right">
                  <a
                   href="javascript:;"
                    class="biaos"
                  >
                    <h3>云音乐新歌榜</h3>
                  </a>
                  <div class="btn">
                    <a
                  href="javascript:;"
                      class="bofang"
                    ></a>
                    <a
                  href="javascript:;"
                      class="jiahao"
                    >收藏</a>
                  </div>
                </div>
              </dt>
              <dd class="listBiao">
                <ol>
                  <li
                    v-for="(item,index) in BangdanXG"
                    :key="item.id"
                    @mouseenter="mouseenter2"
                    @mouseleave="mouseleave2"
                  >
                    <p :class="{PXAAA:Bools}">
                      <span style="margin-right:10px">
                        {{index+1}}
                      </span>
                      <a href="javascript:;">{{item.name}}</a>
                    </p>
                    <div class="oper">
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                    </div>
                  </li>
                </ol>
                <div class="more">
                  <a href="javascript:;">查看全部></a>
                </div>
              </dd>
            </div>

            <div class="left">
              <dt class="Ltop">
                <div class="pho">
                  <img
                    class="photo"
                    src="http://p3.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100"
                    alt=""
                  >
                  <a
                  href="javascript:;"
                    class="BjPhoto"
                  ></a>
                </div>
                <div class="right">
                  <a
                   href="javascript:;"
                    class="biaos"
                  >
                    <h3>网易原创歌曲榜</h3>
                  </a>
                  <div class="btn">
                    <a
                    href="javascript:;"
                      class="bofang"
                    ></a>
                    <a
                    href="javascript:;"
                      class="jiahao"
                    >收藏</a>
                  </div>
                </div>
              </dt>
              <dd class="listBiao">
                <ol>
                  <li
                    v-for="(item,index) in BangdanYC"
                    :key="item.id"
                    @mouseenter="mouseenter3"
                    @mouseleave="mouseleave3"
                  >
                    <p :class="{PXAAA:Boolss}">
                      <span style="margin-right:10px">
                        {{index+1}}
                      </span>
                      <a
                      href="javascript:;"
                        class="XiaoK"
                      >{{item.name}}</a>
                    </p>
                    <div class="oper">
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                    </div>
                  </li>
                </ol>
                <div class="more">
                  <a href="javascript:;">查看全部></a>
                </div>
              </dd>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
 data: () => ({
   BangdanBS:[],
   BangdanXG:[],
   BangdanYC:[],
   Bool:false,
   Bools:false,
   Boolss:false
 }),
  created() {
    this.postBiaoS()
    this.postBiaoSS()
    this.postBiaoSSS()
  },
  methods: {
    BoFangYy(id){
      console.log(id)
      this.posyGQid(id)
    },
    async posyGQid(id){
      try {
        const res=await this.Api.cyzApi.posyGQid(id)
        console.log(res.data.data[0].url)
        // this.$store.commit('QiTa')
        // this.$store.commit('ChangeMusicUrl',res)
        localStorage.setItem('musicUrl',res.data.data[0].url)
      } catch (error) {
        console.log(res)
      }
    }
    ,
    async postBiaoS(){
     try {
        const res=await this.Api.cyzApi.postBiaoSSS()
      this.BangdanBS=res.data.playlist.tracks
      // this.BangdanXG=res.data.data.dailySongs.slice(10,20)
      // this.BangdanYC=res.data.data.dailySongs.slice(20,30)
     } catch (error) {
       console.log("加载音乐飙升榜等等失败"+ error)
     }
    },
    async postBiaoSS(){
     try {
        const res=await this.Api.cyzApi.postBiaoS()
      this.BangdanXG=res.data.playlist.tracks
      // this.BangdanYC=res.data.data.dailySongs.slice(20,30)
     } catch (error) {
       console.log("加载音乐飙升榜等等失败"+ error)
     }
    },
    async postBiaoSSS(){
     try {
        const res=await this.Api.cyzApi.postBiaoSS()
      this.BangdanYC=res.data.playlist.tracks.slice()
     } catch (error) {
       console.log("加载音乐飙升榜等等失败"+ error)
     }
    },
    mouseenter(){
      this.Bool=true
    },
    mouseleave(){
      this.Bool=false
    },
    mouseenter2(){
      this.Bools=true
    },
    mouseleave2(){
      this.Bools=false
    },
    mouseenter3(){
      this.Boolss=true
    },
    mouseleave3(){
      this.Boolss=false
    }
  }
};
</script>
<style lang="less">
.listTao{
    height: 472px;
    width: 690px;
    margin-top: 20px;
    // padding-left: 1px;
    margin-left: 15px;
    background: url('../../../../assets/cyzimgs/zhengtitu.png');
    .left{
    float: left;
    width: 230px;
    height: 472px;
    position: relative;
    .Ltop{
    height: 100px;
    padding: 20px 0 0 19px;
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    .pho{
    float: left;
    display: inline;
    width: 80px;
    height: 80px;
    position: relative;
    .photo{
          display: block;
          text-decoration: underline;
    width: 100%;
    height: 100%;
        border: 0;
    }
    .BjPhoto{
      background: url('../../../../assets/cyzimgs/xuebitu5.png');
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background-position: -145px -57px;
    }
    }
    .right{
          float: left;
    width: 116px;
    margin: 6px 0 0 10px;
    .biaos{
      h3{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color:#000;
      }
      h3:hover{
        text-decoration: underline;
      }
    }
    .btn{
          margin-top: 10px;
          .bofang{
                display: block;
    float: left;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    text-indent: -9999px;
    background: url('../../../../assets/cyzimgs/xuebitu.png') no-repeat 0 9999px;;
        background-position: -267px -205px;
          }
          .jiahao{
            display: block;
            float: left;
            width: 22px;
            height: 22px;
            margin-right: 10px;
            text-indent: -9999px;
            background: url('../../../../assets/cyzimgs/xuebitu.png') no-repeat 0 9999px;;
            background-position: -300px -205px;
          }
      .bofang:hover{
        background-position: -267px -235px;
      }
      .jiahao:hover{
        background-position: -300px -235px;
      }
    }
    }
    }
    .listBiao{
      padding: 0;
    margin: 0;
    margin-inline-start: 40px;
      ol{
        height: 319px;
    margin-left: 50px;
    line-height: 32px;
        padding: 0;
    margin: 0;
    li{
      height: 32px;
      list-style: none;
      .PXAAA{
        width:96px;
        width: 100px; /*必须设置宽度*/
        overflow: hidden; /*溢出隐藏*/
        text-overflow: ellipsis; /*以省略号...显示*/
        white-space: nowrap; /*强制不换行*/
      }
      p{
        position:absolute;
       a{
          font-size: 12px;
          color:#000;
       }
       a:hover{
         text-decoration: underline;
       }
      }
      .oper{
        display: none;
        float: right;
        width: 82px;
        margin-top: 7px;
        vertical-align: middle;
          a:nth-child(1){
                float: left;
                width: 17px;
                height: 17px;
                margin-right: 10px;
                background: url('../../../../assets/cyzimgs/xuebitu.png');
                background-position: -267px -268px;

          }
          a:nth-child(2){
            margin: 2px 6px 0 0;
            float: left;
            width: 17px;
            height: 17px;background: url('../../../../assets/cyzimgs/xuebitu6.png') ;
            background-position: 0 -700px;
          }
          a:nth-child(3){
            margin: 2px 6px 0 0;
            float: left;
            width: 17px;
            height: 17px;background: url('../../../../assets/cyzimgs/xuebitu.png') ;
            background-position: -297px -268px;
          }
          a:nth-child(1):hover{
            background-position: -267px -288px;
          }
          a:nth-child(2):hover{
            background-position: -22px -700px;
          }
          a:nth-child(3):hover{
            background-position: -297px -288px;
          }
      }
    }

    li:hover{
      .oper{
        display: block;
      }
    }
    li:nth-child(1){
      height: 32px;
      list-style: none;
      p{
        position:absolute;
        span{
          color: #c10d0c;
        }
      }
    }
  li:nth-child(2){
      height: 32px;
      list-style: none;
      p{
        position:absolute;
        span{
          color: #c10d0c;
        }
      }
    }
      li:nth-child(3){
      height: 32px;
      list-style: none;
      p{
        position:absolute;
        span{
          color: #c10d0c;
        }
      }
    }
    li:nth-child(10){
      height: 32px;
      list-style: none;
      p{
        position:absolute;
        span{
          margin-left: -4px;
        }
      }
    }


      }


      .more{
            clear: both;
        height: 32px;
        margin-right: 32px;
        text-align: right;
        line-height: 32px;
      a{
        color: #000;
        font-size: 12px;
      }
      a:hover{
        text-decoration: underline;
      }
      }
    }
  }






}
</style>